Side menu with minimum width

I want to create a side menu of minimal width next to the content.

Using [Flexbox

If you do not specify a width for the menu, it will be just about the size of the contents.

By default, flex-basis: auto

Specify flex-grow on the content side.

Default is 0

This will result in "no menu growth, only content growth.

I didn't want the menu side to be too tight with that, so I specified padding.

I added something like width: 20% with my old knowledge before flexbox, but it wasn't necessary.

https://gyazo.com/8c5966540dd1747f2214e5982110dbec

https://gyazo.com/d87b96100f2a6047f40b6ff699c58877

code:html

<div style="display: flex">

<div style="background: green; flex-grow: 1">

contents

</div>

<div style="background: red; padding: 2px">

menu

</div>

</div>

---